<template>
  <div class="exam">
    <!-- 头部 -->
    <div class="exam_sub">
      <span class="title">作业</span>
      <div class="sub_exit">
        <span class="save" @click="saveClick()">保存</span>
        <span class="submit" @click="submitClick()" ref="submit">提交</span>
      </div>
    </div>

    <div class="exam_area">
      <!-- 页面题号部分 -->
      <exam-total />

      <!-- 页面答题部分 -->
      <answer @timeOut="timeOutBySubmit" />
    </div>
  </div>
</template>

<script>
import answer from './childComps/answer';
import examTotal from './childComps/examTotal';

import Bus from '@/common/bus';

export default {
  name: 'StudentExam',
  data() {
    return {};
  },
  components: {
    answer,
    examTotal,
  },
  methods: {
    saveClick() {
      // 保存填写的内容

      // 退出界面
      this.$router.push('/studentCourse');
    },
    submitClick() {
      // 保存并提交填写的答案

      const title = document.querySelector('.title');
      if (title.innerHTML == '作业') {
        console.log('已完成提交作业。。。。');
        Bus.$emit('submit', true);
      }

      // 退出界面
      this.$router.push('/studentCourse');
    },

    timeOutBySubmit() {
      // 时间已到触发提交事件
      this.$refs['submit'].click();
    },
  },
};
</script>

<style scoped>
.exam {
  position: relative;
  top: 0;
  left: -86px;
  right: 0;
  width: 100vw;
  padding: 50px;
  z-index: 1000;
  background-color: #f2f4f7;
}

.exam .exam_sub {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  z-index: 100;
  background: #3a4357;
  text-align: center;
  line-height: 50px;
  color: #a8a8b3;
}
.exam_sub .sub_exit {
  float: right;
  width: 200px;
  height: inherit;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
.exam_sub .sub_exit span {
  flex: 1;
  line-height: 50px;
  height: inherit;
  text-align: center;
}
.exam_sub .sub_exit span:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.exam_sub .sub_exit .submit {
  background-color: #3a8bff;
}

.exam .exam_area {
  /* margin: 30px 0 0 50px; */
  margin-top: 30px;
  display: flex;
  justify-content: center;
  user-select: none;
}
</style>